<template>
  <view class="home">
    <navbar></navbar>
    <uni-popup ref="popupsuccess" type="message">
      <uni-popup-message type="success" message="刷新成功" :duration="2000"></uni-popup-message>
    </uni-popup>
    <uni-popup ref="popuperror" type="message">
      <uni-popup-message type="error" message="更新失败,请重试" :duration="2000"></uni-popup-message>
    </uni-popup>

    <!-- 开始 -->
    <view>
      <view>
        <view class="uni-padding-wrap">
          <view class="page-section swiper">
            <view class="page-section-spacing">
              <swiper class="swiper" indicator-dots="indicatorDots" indicator-active-color="#f07373"
                      :duration="duration">
                <swiper-item v-for="(item, index) of icon" :key="index">
                  <view class="icon">
                    <view v-for="(v, index) of item" :key="v.id" class="icon_block"
                          @click="toList(v.id, v.name)">
                      <image :src="v.picimage" mode="aspectFit"></image>
                      <view class="name">{{ v.name }}</view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>

      </view>
    </view>
    <!-- 结束 -->


    <view class="title">
      <text @click="testWxPay">最新消息（共 {{ total_num }} 条）</text>
    </view>

    <!-- <list-item :list="artList"></list-item> -->
    <list-block :list="artList"></list-block>

    <view class="more" v-if="showButtonLoading">
      <uni-load-more :status="more" :content-text="contentText"></uni-load-more>
    </view>

  </view>
</template>

<script>
import {
  mapState
} from 'vuex'

export default {
  data() {
    return {
      artList: [], // 新闻信息
      more: 'loading',
      showButtonLoading: false,
      currentPage: 1,
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      },
      icon: [], //首页图标
      total_num: 0, //最新消息

      autoplay: false,
      duration: 500
    }
  },
  computed: {
    ...mapState(['userinfo']),
    ...mapState(['notSeeCommentNum']),
  },
  watch: {
    // 检测userinfo的变化
    userinfo(newVal) {
      //userinfo 变好了
      console.log('watch userinfo变化了')
    }
  },
  onLoad() {

  },
  async mounted() {
    // 分享
    await this.shareWx()
  },
  onShow() {
    const that = this
    // 监听文章发送事件
    uni.$on('submitChange', (res) => {
      this.artList = []
      that.currentPage = 1
      console.log('监听文章发送事件')
      that.getList(1);
    })

    this.getList();

    this.getInfo();

    if (that.userinfo) {
      // 监听文章发送事件
      that.$api.getNotSeeCommentNum({
        user_id: that.userinfo.id
      }).then(result => {
        // 把登录信息赋值给 vuex 中的 notSeeCommentNum
        that.$store.dispatch('set_notseecommentnum', result)

        var count = that.notSeeCommentNum

        if (count > 99) {
          count = '99+';
        }
        // uni.setTabBarBadge({
        // 	index: 3,
        // 	text: String(count)
        // })
      }).catch(err => {
        console.log(err)
      })
    }

  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.getList(1);
  },
  // 上滑加载
  onReachBottom() {
    // this.more == moMore 时候表示已经加载完成,不需要再请求了
    if (this.more == 'moMore') {
      return;
    } else {
      this.getList(2);
    }
  },
  methods: {
    // 微信支付
    testWxPay() {
      // uni.navigateTo({
      // 	url: '/pages/shopping/shopping',
      // 	success: res => {},
      // 	fail: () => {},
      // 	complete: () => {}
      // });

    },


    changeAutoplay(e) {
      this.autoplay = !this.autoplay
    },
    intervalChange(e) {
      this.interval = e.target.value
    },
    durationChange(e) {
      this.duration = e.target.value
    },

    // 获取图标
    getInfo() {
      this.$api.get_info().then(res => {
        this.icon = res.data.icon
        this.total_num = res.data.total_num
      })
    },
    toList(id, name) {
      console.log(id)

      uni.navigateTo({
        url: '/pages/list/list?id=' + id + '&title=' + name
      });

    },
    //获取数据
    // is_pulldownrefresh = 0 原始加载
    // is_pulldownrefresh = 1 下拉刷新数据
    // is_pulldownrefresh = 2 上拉加载数据
    getList(is_pulldownrefresh = 0, page = this.currentPage, num = 5) {

      if (is_pulldownrefresh === 0) {
        // 显示顶部加载
        // uni.showLoading()
      } else if (is_pulldownrefresh === 1) {
        uni.showLoading()
      } else if (is_pulldownrefresh === 2) {
        this.showButtonLoading = true
      }
      // 为了显示
      var _this = this

      this.$api.get_list({
        page: page,
        num: num
      }).then(res => {
        if (res.code === 1) {

          if (res.data.length === 0) {
            //加载完成
            _this.more = 'moMore'
            _this.showButtonLoading = true
          } else if (res.data.length < num) {
            //如果本次加载的数量小于num说明已经获取完了
            _this.more = 'moMore'

          }

          _this.artList = _this.artList.concat(res.data)
          _this.currentPage = _this.currentPage + 1;

          if (is_pulldownrefresh === 1) {
            // is_pulldownrefresh = 1 下拉刷新数据
            setTimeout(() => {
              //停止加载
              uni.stopPullDownRefresh();

              //提示刷新成功
              _this.$refs.popupsuccess.open()

              //隐藏加载
              uni.hideLoading()

            }, 1000)
          } else if (is_pulldownrefresh == 2) {
            // is_pulldownrefresh = 2 上拉加载数据
            setTimeout(() => {
              //隐藏加载
              uni.hideLoading()

            }, 1000)
          } else {
            //隐藏加载
            uni.hideLoading()
          }

        } else {
          //提示刷新成功
          _this.$refs.popuperror.open()
          //隐藏加载
          uni.hideLoading()
        }


      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss">
/deep/ .swiper {
  padding-bottom: 10px;
}

/deep/ .uni-swiper-wrapper {
  padding-bottom: 36px;
}

page {
  display: flex;

  .icon {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    font-size: 10px;
  }

  .icon_block {
    width: 20%;
    overflow: hidden;
    text-align: center;
    margin-top: 20px;

    image {
      width: 30px;
      height: 30px;
      display: inline-block;
    }

    .name {
    }
  }

  .title {
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }

  .home {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
  }

  .more {
    padding: 20 rpx 0;
  }

}
</style>
